<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <title>Document</title>
    <script src="./js/gptwords.js"></script>
    <script src="./js/vue.2.7.16.js"></script>
    <script src="./js/marked.umd.js"></script>
    <script src="./js/cmu-pronouncing-dictionary.min.js"></script>
    <script src="./js/arpabet-to-ipa.js"></script>
    <style>
      * {
        box-sizing: border-box;
      }
      html,
      body {
        padding: 0;
        margin: 0;
      }
      .search {
        position: fixed;
        top: 0;
        left: 0;
        height: 60px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #f5f5f5;
        padding: 0 10px;
      }
      .search input {
        flex: 1 1 auto;
        height: 45px;
        line-height: 45px;
        border: none;
        border-radius: 4px 0 0 4px;
        padding-left:10px;
      }
      .search input:focus {
        /* outline: 1px solid #4dbef7; */
        outline: none;
        box-shadow: inset 0 0 0 1px rgba(74, 144, 226, 0.4); /* 模拟圆角outline */
      }
      .search button {
        width:60px;
        height: 45px;
        line-height: 45px;
        border: none;
        background-color: #4dbef7;
        border-radius: 0 4px 4px 0;
      }
      .word-content{
        padding: 10px;
        overflow-y: auto;
        height: calc(100vh - 60px);
        margin-top: 60px;
      }
      .word{
        color:#f526be;
        font-size: 40px;
        padding:5px 10px;
      }
      .phonic{
        font-size: 28px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="search">
        <input @keyup.enter="search" type="text" v-model="query" />
        <button @click="search">查询</button>
      </div>
      <div class="word-content">
        <h1 class="word">
          {{word.word}}
          <span class="phonic">{{word.phonic[word.word].kk_no_space}}</span>
        </h1>
        <div v-html="word.content"></div>
      </div>
    </div>
    <script>
      // 开启调试模式
      Vue.config.devtools = true;
      new Vue({
        el: "#app",
        data() {
          return {
            query: "",
            word: {
              word: "",
              content: "",
            },
          };
        },
        created() {
          this.search();
        },
        methods: {
          search() {
            let word = "";
            if (!this.query) {
              // 随机返回[0-8714)之间的整数
              const random = Math.floor(Math.random() * 8714);
              word = Dict[random];
              this.word = {
                word: word.word,
                phonic: arpabetToKk(word.word),
                content: marked.parse(word.content),
              };
              return;
            }
            word = Dict.find((item) => item.word === this.query.trim());
            if (word) {
              this.word = {
                word: word.word,
                phonic: arpabetToKk(word.word),
                content: marked.parse(word.content),
              };
            }
            console.log(this.word);
          },
        },
      });
    </script>
  </body>
</html>
